@charset "utf-8";
@import "common/reset";
@import "common/public";
@function r($px) {
    @return $px/100*1rem
}

$color:#ff9344;
.web {
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    section {
        width: 100%;
        position: absolute;
        left: 0;
        top: r(150);
        overflow-y: auto;
        bottom: r(130);
        padding: 0 r(20);
        
        .pulic_bar:nth-child(3) {
                p>i:nth-child(1) {
                    font-size: r(57);
                    color: #ef9c0a;
                }
        }
        .pulic_bar:nth-child(4) {
            p>i {
                font-size: r(57);
                color: #ff9344;
            }
        }
        .pulic_bar:nth-child(5) {
            p>i {
                font-size: r(57);
                color: #b2e0a0;
            }
        }
        .pulic_bar:nth-child(6) {
            p>i {
                font-size: r(57);
                color: #9cdadf;
            }
        }
        .pulic_bar:nth-child(7) {
            margin-top: r(41);
            p>i{
                font-size: r(60);
                color: #ff9344;
            }
        }
        .pulic_bar:nth-child(8) {
            p>i{
                font-size: r(60);
                color: #ff9344;
            }
        }
        .login {
            width: r(705);
            height: r(173);
            margin: r(18) 0 r(26);
            .login_img {
                width: r(171);
                height: r(173);
                margin-right: r(24);
                border-radius: 50%;
                background-color: pink;
            }
            .login_text {
                position: relative;
                width:r(510);
                p {
                    padding-top:r(36);
                    font-size:r(26);
                    a {
                        color: black;
                    }
                }
                p:nth-of-type(2) {
                    color: #9d9d9d;
                    padding-bottom: r(36);
                    a {
                        color: #9d9d9d;
                    }
                }
                i {
                    font-size: r(70);
                    position: absolute;
                    top: 50%;
                    right: 0px;
                    transform: translateY(-50%);
                }
            }
        }
        .my_classify {
            width: r(705);
            height: r(151);
            margin: 0 auto r(32);
            font-size: 0;
            .my_classify_left {
                width: r(194);
                height: r(151);
                margin-right:r(62);
                background-color: #b2e0a0;
                text-align: center;
                padding-top: r(20);
                i {
                    color: white;
                    font-size: r(78);
                }
                p {
                    font-size: r(26);
                    text-align: center;
                    a {
                        color: black;
                    }
                }
            }
            .my_classify_center {
                width: r(194);
                height: r(151);
                margin-right: r(60);
                background-color: #a0dce0;
                text-align: center;
                padding-top: r(20);
                i {
                    color: white;
                    font-size: r(78);
                }
                p {
                    font-size: r(26);
                    text-align: center;
                    a {
                        color: black;
                    }
                }
            }
            .my_classify_right {
                width: r(194);
                height: r(151);
                background-color: #e0b7a0;
                text-align: center;
                padding-top: r(20);
                i {
                    color: white;
                    font-size: r(78);
                }
                p {
                    font-size: r(26);
                    text-align: center;
                    a {
                        color: black;
                    }
                }
            }
        }
        .button{
            font-size: 0;
            width: r(538);
            height: r(76);
            margin: 0 auto;
            button:nth-of-type(2){
                float: right;
            }
            button{
                outline: none;
                border-radius:r(147) ;
                width: r(147);
                height: r(76);
                font-size: r(24);
                color: white;
                text-align: center;
                background-color:$color ;
                a{
                    color: white;
                }
            }
        }
    }
}
